import React, {Component} from 'react';
import {connect} from 'dva';
import ReactDOM from 'react-dom';
import {Card, Row, Col,message,Form,DatePicker,Select,Button,List,Icon} from 'antd';
import DefinitionList from '../../../../components/DefinitionList';
import PortSelect from '../../../../components/toolbar/PortSelect';
import BenchSelect from '../../../../components/toolbar/BenchSelect';
const FormItem = Form.Item;
const Option = Select.Option;
const RangePicker = DatePicker.RangePicker;
import style from './home.less'
import {
		Tabtitle,
		IECharts,
		NoData,
		IncomeTrend,
		DataNone,
		NumberWithColor,
		Loading
	} from '../../../../components';
import "../../../../utils/orgchart/jquery.orgchart.js";
import {
    ProlistSelect,
	TimeRangeSelect,
	DateRangePicker,
} from '../../../../components/ToolbarItem';

/**
 * 工具栏
 * @param {[type]} tag           [所属model]
 * @param {[type]} productList   [产品组合列表]
 * @param {[type]} timeRangeList [时间区间列表]
 * @param {[type]} timeRange     [时间区间值]
 * @param {[type]} lPortId       [产品组合id]
 * @param {[type]} beginDate     [开始时间]
 * @param {[type]} endDate       [结束时间]
 * @param {[type]} dispatch      [方法]
 * @param {[type]} location      [路由]
 * @param {[type]} query         [路由query]
 */
const Toolbar=({
		tag,
		productList,
		timeRangeList,
		timeRange,
		benchCodeList,
		industryList,
		lPortId,
		beginDate,
		endDate,
		dispatch,
		ListPdt,
		isShow,
		pdtsearchId,
		BListPdt,
		BisShow,
		BpdtsearchId,
		onePdt,
		location:{
			pathname,
			query
		}
	})=>{
		/**
		 * 查询方法
		 *
		 * 产品组合值为空时，提示'请选择组合'
		 * 时间区间为0时，开始时间和结束时间为空时，提示'请选择时间！'
		 * 符合条件则更改路由
		 */
		const queryData=() => {
			if(!lPortId){
				message.warning('请选择产品组合');
			}else{
				if(timeRange==='0'){
					if(!(beginDate&&endDate)){
						message.warning('请选择时间！');
					}else{
							dispatch({
								type: `${tag}/changeRouter`,
								query,
								payload:{
									pathname,
									query:{
										lPortId,
										timeRange,
										beginDate,
										endDate,
									}
								}
							})
					}
				}else{
					dispatch({
						type: `${tag}/changeRouter`,
						query,
						payload:{
							pathname,
							query:{
								lPortId,
								timeRange,
							}
						}
					})
				}
			}
		}
		return(
			<div  style={{position:'relative'}}>
				<Row className={`toolbar ${style.toolbar}`} type="flex" justify="space-between">
						<Col>
						<Icon type="search" style={{ fontSize: 16 }} />Search
						</Col>
						<Col>
							<DefinitionList name='产品组合：' 
						value={<ProlistSelect
									data={ListPdt}
									value={lPortId&&ListPdt[0].id!=''?ListPdt.find(item=>item.id==lPortId).value:''}
									dispatch={dispatch}
									tag={tag} />} />
							<DefinitionList name='时间区间：' 
						value={<TimeRangeSelect
							data={timeRangeList}
							value={timeRange&&timeRangeList[0].value!=''?timeRangeList.find(item=>item.value==timeRange).name:''}
							dispatch={dispatch}
							tag={tag}/>} />
							{
								timeRange==="0"?
								<DefinitionList
								value={<DateRangePicker
									beginDate={beginDate}
									endDate={endDate}
									dispatch={dispatch}
									tag={tag}/>} />
								:null
							}
							<Button type="primary" style={{marginLeft:30}} onClick={queryData}>
								查询
							</Button>
						</Col>
					</Row>
				{/* </Form> */}
			</div>
		)
}

class Report extends Component {
	constructor(props) {
		super(props);
		this.state = {
		  url:'',
		};
	  }

  render() {
	const { dispatch,custodianEvaluation,prolist,portfolio,fundResult,income,location } = this.props;
	const {
		lPortId,
		timeRange,
		beginDate,
		endDate,
		pdtsearchId,
		ListPdt,
		isShow,
		onePdt,
		BListPdt
	}=custodianEvaluation
	const {
		productList,
		timeRangeList,
		industryList,
		benchCodeList,
		BpdtsearchId,
		BisShow,
	}=prolist
	const {
		names,
		weight,
		rights,
		table,
		org
	}=fundResult
	const {
		series
	}=income

	const {pathname,query}=location;
  const tag=pathname.split('/')[pathname.split('/').length-1]
	const toolbarProps={
		tag,
		...prolist,
		...custodianEvaluation,
		dispatch,
		location,
	}

	let downloadApiQuery='';
	for(let key in query){
		downloadApiQuery+=`&${key}=${query[key]}`
	}
	const hostname=window.location.hostname;
	const editDetail = (url) =>{
		this.props.dispatch({
            type: `app/changeRouter`,
            payload:{
                pathname:'/fundAnalysis/custodianEvaluationDetail',
                query:{
                    url,
                }
            }
          })
	}

	return (
		<div>
						<div className="content-inner">
						<Tabtitle value={'管理人评估报告'}/>
						<Toolbar {...toolbarProps}/>
						{
						(table&&table.length)?(
							<div className="main-content">
								<Card  bordered={false}  className={`module ${style.overview}`}>
									{
										 <List
										 size="large"
										 bordered
										 dataSource={table}
										 renderItem={item => (
										   <List.Item>
											 <List.Item.Meta
											   title={<a onClick={() => editDetail(item.reportName)}>{item.reportName}</a>}
											 />
										   </List.Item>
										 )}
									   />
									}
								</Card>
							</div>
						):<NoData />}
						</div>
			</div>
	)
 }
}

Report.propTypes = {
};
	
export default connect(({custodianEvaluation,prolist,fundResult,income,portfolio}) => ({custodianEvaluation,prolist,fundResult,income,portfolio}))(Report);
